<template>
    <div class="float-div">
        <h1>切换上位置</h1>
        <div class="drag-box">
            <draggable :list="list" :animation="100" class="list-group" :forceFallback="true" chosen-class="chosenClass"
                group="componentsGroup">
                <template #item="{ element }">
                    <div class="items">
                        <div class="title">{{ element.label }}</div>
                        <img :src="element.img" height="100" alt="111">
                    </div>
                </template>
            </draggable>
        </div>
    </div>
    <div class="float-div">
        <h1>切换下位置111</h1>
        <div class="drag-box">
            <draggable :list="cloneList" :animation="100" class="list-group" :forceFallback="true" chosen-class="chosenClass"
                group="componentsGroup">
                <template #item="{ element }">
                    <div class="items">
                        <div class="title">{{ element.label }}</div>
                        <img :src="element.img" height="100" alt="111">
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</template>

<script lang="ts">
import { reactive, watch,defineComponent } from "vue";
import draggable from "vuedraggable";
import img1 from '@/assets/images/sex-1.png'
import img2 from '@/assets/images/sex-2.png'
import img3 from '@/assets/images/sex-3.png'
import img4 from '@/assets/images/sex-4.png'
import img5 from '@/assets/images/sex-1.png'
import img6 from '@/assets/images/sex-2.png'
import img7 from '@/assets/images/sex-3.png'
import img8 from '@/assets/images/sex-4.png'
import img9 from '@/assets/images/sex-4.png'

interface ListItem {
    img: string;
    label: string;
    id: number;
}

export default defineComponent({
    name: "ImgDrag",
    components: {
        draggable,
    },
    setup() {
        const list: ListItem[] = reactive([
            {
                img: img1,
                label: "图片1",
                id: 1,
            },
            {
                img: img2,
                label: "图片2",
                id: 2,
            },
            {
                img: img3,
                label: "图片3",
                id: 3,
            },
            {
                img: img4,
                label: "图片4",
                id: 4,
            },
            {
                img: img5,
                label: "图片5",
                id: 5,
            },
            {
                img: img6,
                label: "图片6",
                id: 6,
            },
            {
                img: img7,
                label: "图片7",
                id: 7,
            },
            {
                img: img8,
                label: "图片8",
                id: 8,
            },
        ]);

        const cloneList: ListItem[] = reactive([
            {
                img: img9,
                label: "图片9",
                id: 9,
            },
        ]);

        watch(
            () => list,
            () => {
                // Your watch logic here
            }
        );

        return {
            list,
            cloneList,
        };
    },
});

</script>

<style lang="scss" scoped>
.drag-box .items {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    background: #e3e3e3;
    border-radius: 8px;
    text-align: center;
}

.chosenClass {
    border: 3px solid red !important;
}

.float-div {
    float: left;
    width: 46%;
}

div {
    margin: 2%;
}
</style>